<template>
  <div class="waper">
    <el-dialog v-model="centerDialogVisible"
               title="是否确定退出登录？"
               width="500"
               :close-on-click-modal="false"
               center>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="tuichu">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-container class="layout-container-demo"
                  style="height: 100vh">
      <el-aside width="250px">
        <el-scrollbar>
          <div class="guanli">
            <div class="left">
              <p class="names">管理员</p>
              <p class="names aa">{{ user }}</p>
            </div>
            <div class="right">
              <p @click="centerDialogVisible = true">退出登录</p>

            </div>
          </div>
          <el-menu background-color="#eeecde"
                   :default-active="active_index">
            <el-menu-item index="1">
              <template #title>
                <p class="caidan bb"
                   @click="tiao('','1')"><el-icon>
                    <Stamp />
                  </el-icon>用户管理</p>
              </template>
            </el-menu-item>
            <el-sub-menu index="2">
              <template #title>

                <p class="caidan"> <el-icon>
                    <Briefcase />
                  </el-icon>首页管理</p>
              </template>
              <el-menu-item index="2-1"
                            @click="tiao('lunbo','2-1')">
                <el-icon>
                  <Picture />
                </el-icon>
                轮播图管理</el-menu-item>
              <el-menu-item index="2-2"
                            @click="tiao('zixun','2-2')">
                <el-icon>
                  <Document />
                </el-icon>
                每日资讯管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <p class="caidan xiao"><el-icon>
                    <Shop />
                  </el-icon>宠物领养管理
                  <el-badge v-show="store.getAdoptCount!=0"
                            :value="store.getAdoptCount"
                            :max="99"
                            class="item">
                  </el-badge>
                </p>
              </template>
              <el-menu-item index="3-1"
                            @click="tiao('pets','3-1')">
                <el-icon>
                  <CreditCard />
                </el-icon>
                待领养宠物信息管理
              </el-menu-item>
              <el-menu-item index="3-2"
                            @click="tiao('shenhe','3-2')">
                <p class="zicai xiao"><el-icon>
                    <SetUp />
                  </el-icon>
                  宠物领养审核
                  <el-badge v-show="store.adoptshen!=0"
                            :value="store.adoptshen"
                            :max="99"
                            class="item">
                  </el-badge>
                </p>
              </el-menu-item>
              <el-menu-item index="3-3"
                            @click="tiao('lingyang','3-3')">
                <p class="zicai xiao">
                  <el-icon>
                    <DocumentChecked />
                  </el-icon>
                  审核通过待领养管理
                  <el-badge v-show="store.dailing!=0"
                            :value="store.dailing"
                            :max="99"
                            class="item1">
                  </el-badge>
                </p>
              </el-menu-item>
              <el-menu-item index="3-4"
                            @click="tiao('yiling','3-4')"><el-icon>
                  <WindPower />
                </el-icon>
                已领养宠物记录管理
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <p class="caidan xiao"><el-icon>
                    <Flag />
                  </el-icon>宠物救助管理
                  <el-badge v-show="store.getHelpCount!=0"
                            :value="store.getHelpCount"
                            :max="99"
                            class="item">
                  </el-badge>
                </p>
              </template>
              <el-menu-item index="4-1"
                            @click="tiao('daijiu','4-1')">
                <p class="zicai xiao">
                  <el-icon>
                    <ScaleToOriginal />
                  </el-icon>
                  救助信息审核
                  <el-badge v-show="store.daihelp!=0"
                            :value="store.daihelp"
                            :max="99"
                            class="item">
                  </el-badge>
                </p>
              </el-menu-item>
              <el-menu-item index="4-2"
                            @click="tiao('jiuzhong','4-2')">
                <p class="zicai xiao">
                  <el-icon>
                    <FirstAidKit />
                  </el-icon>
                  救助中
                  <el-badge v-show="store.gohelp!=0"
                            :value="store.gohelp"
                            :max="99"
                            class="item">
                  </el-badge>
                </p>
              </el-menu-item>

              <el-menu-item index="4-3"
                            @click="tiao('wanjiu','4-3')">
                <el-icon>
                  <Film />
                </el-icon>
                已救助宠物记录管理
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <p class="caidan"><el-icon>
                    <WalletFilled />
                  </el-icon>
                  宠物论坛管理
                </p>
              </template>

              <el-menu-item index="5-1"
                            @click="tiao('lunlist','5-1')">
                <el-icon>
                  <Tickets />
                </el-icon>
                论帖管理</el-menu-item>
              <el-menu-item index="5-2"
                            @click="tiao('pinlun','5-2')">
                <el-icon>
                  <CoffeeCup />
                </el-icon>
                评论管理</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="6">
              <template #title>
                <p class="caidan dd"
                   @click="tiao('zhishi','6')">
                  <el-icon>
                    <Opportunity />
                  </el-icon>
                  养宠小知识管理
                </p>
              </template>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <router-view></router-view>
    </el-container>
  </div>
</template>

<script  setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCounterStore } from '@/stores'
import axios from '@/axios'
const router = useRouter()
const store = useCounterStore()
let user = ref('')
let daihelp = ref([])
let helpzhong = ref([])
let active_index = ref('1')
let centerDialogVisible = ref(false)
const tiao = (url, index) => {
  router.push(`/index/${url}`)
  localStorage.setItem('dakaiindex', index)
}
const tuichu = () => {
  centerDialogVisible.value = false
  localStorage.removeItem('gly')
  router.replace('/')
}
onMounted(() => {
  active_index.value = localStorage.getItem('dakaiindex')
  user.value = localStorage.getItem('gly')
  axios
    .get('/daishen')
    .then((d) => {
      //过滤数据
      store.adoptshen = d.length
    })
    .catch((err) => console.log(err))
  axios
    .get('/dailing')
    .then((d) => {
      //过滤数据

      store.dailing = d.length
    })
    .catch((err) => console.log(err))
  axios
    .get('/jiuzhu')
    .then((d) => {
      //过滤数据
      daihelp.value = d.filter((item) => {
        return item.status == '等待救助中'
      })
      store.daihelp = daihelp.value.length
      // console.log(list.value)
    })
    .catch((err) => console.log(err))
  axios
    .get('/jiuzhu')
    .then((d) => {
      //过滤数据
      helpzhong.value = d.filter((item) => {
        return item.status == '救助中'
      })
      store.gohelp = helpzhong.value.length
      // console.log(list.value)
    })
    .catch((err) => console.log(err))
})
</script>

<style scoped lang="less">
.waper {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  .guanli {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #cdbf62;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    .left {
      width: 60%;
      height: 100%;
      border-right: 1px solid #000;
      .names {
        width: 100%;
        height: 30px;
        line-height: 30px;
        background-color: #f8f1c7;
        text-align: center;
        font-size: 16px;
      }
      .aa {
        font-size: 20px;
        color: #eaa40d;
      }
    }
    .right {
      width: 40%;
      height: 100%;
      // background-color: #f8f1c7;
      p {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 18px;
        color: #d43e3e;
        cursor: pointer;
        background-color: #f8f1c7;
        margin-top: 30px;
        border: 1px solid #f8f1c7;
      }
    }
  }
  .caidan {
    width: 100%;
    text-align: center;
  }
  .bb {
    margin-right: 20px;
  }
  .dd {
    margin-right: 10px;
  }
  .zicai {
    width: 70%;
    font-size: 14px;
  }
  .xiao {
    position: relative;
  }
  .item {
    position: absolute;
    top: 0;
    right: 0;
    height: 30px;
    line-height: 30px;
  }
  .item1 {
    position: absolute;
    top: 0;
    right: -18px;
    height: 30px;
    line-height: 30px;
  }
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: #cdbf62;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: #cdbf62;
  color: var(--el-text-color-primary);
}
.el-menu-item.is-active {
  color: #eaa40d;
  background-color: #f3f6d2;
}
.el-menu {
  margin-top: 60px;
}
</style>
